<!doctype html>
<meta charset="utf-8">
<title>B站直播实时弹幕分析</title>
<link href="../static/css/style.css"  rel="stylesheet" type="text/css" media="all" />
<script src="../static/js/echarts.min.js" charset="utf-8"></script>
  <script src="../static/js/jquery-2.1.4.min.js"></script>

<body>
<div class="wpbox">
<div class="bnt">
  <input  type="hidden"  id="roomid"  value="{{roomid}}">
  <div class="topbnt_left fl">
   <ul><!-- <li class="active">< href="#">警情警力</a></li>
      <li><a href="#">实有人口</a></li>
      <li><a href="#">流动人口</a></li>
      <li><a href="#">实名制</a></li> -->
   </ul>
  </div>
  <h1 class="tith1 fl">B站直播实时弹幕分析</h1>
  <div class=" fr topbnt_right">
    <ul>
      <!--  <li><a href="#">返回</a></li>
       <li><a href="#">分析报告</a></li>
       <li><a href="#">交通</a></li>
       <li><a href="#">舆情</a></li> -->
    </ul>
   </ul>
  </div>
</div>
<!-- bnt end -->
<div class="left1">
    <div class="aleftboxttop"><h2 class="tith2"  id="uid"></h2>
    <div class="lefttoday_tit" style=" height:8%"><p class="fl">房间号：{{roomid}}</p><p class="fr" id="d51"></p></div>
    <div class="lefttoday_number">
      <div class="widget-inline-box text-center fl">
        <p>粉丝数</p>
        <h3 class="ceeb1fd"  id="d52"></h3>
        <!-- <h4 class="text-muted pt6">环比<img src="img/iconup.png" height="16" />2%</h4> -->
      </div>
      <div class="widget-inline-box text-center fl">
         <p>关注数</p>
        <h3 class="c24c9ff"  id="d53"></h3>
        <!-- <h4 class="text-muted pt6">环比<img src="img/iconup.png" height="16" />3%</h4> -->
      </div>
      <div class="widget-inline-box text-center fl">
         <p>当前评论数</p>
        <h3 class="cffff00"  id="d54"></h3>
        <!-- <h4 class="text-muted pt6">环比<img src="img/iconup.png" height="16" />3%</h4> -->
      </div>
      <!-- <div class="widget-inline-box text-center fl">
         <p>处理中</p>
        <h3 class="c11e2dd">4</h3>
        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
      </div> -->
    </div>
    <!-- lefttoday_number end -->
    </div>
    <div class="aleftboxtmidd">
      <h2 class="tith2">关键字抽取</h2>
          <div class="lefttoday_tit height ht"><p class="fl">状态：已刷新</p><p class="fr"  id="d4"></p></div>
      <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
  </div>
  <div class="aleftboxtbott">
    <!-- <h2 class="tith2">矛盾纠纷类型统计</h2>
        <div class="lefttoday_tit height"><p class="fl">状态：已刷新</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
    <div id="aleftboxtbott" class="aleftboxtbott_cont" ></div> -->
	<h2 class="tith2">高频词统计分析</h2>
	  <!-- <div id="pleftbox2midd" class="pleftbox2middcont"></div> -->
	  <div class="pvr fl  lpeftb2otcont1 hdtop" style=" height:82%;" >
		<!-- <ul>
		  <li class="hot1">1</li>
		  <li class="hot2">2</li>
		  <li class="hot3">3</li>
		  <li class="hot4">4</li>
		  <li class="hot5">5</li>
		</ul> -->
		<div id="pleftbox2bott_cont" class="pleftbox2middcont" style=" height:100%;" >
		
		</div>
	  </div>

  </div>


</div>
<!--  left1 end -->
<div class="mrbox">
      <div class="mrbox_topmidd" style="width: 69%;">
          <div class="amiddboxttop">
              <h2 class="tith2 pt1">实时弹幕词云统计</h2>
                <div class="amiddboxttop_map" id="findId" >
                 <!-- <span class="camera_l"  style=" top:34%;left:32%"></span>
                 <span class="camera_l" style=" top:10%;left:10%"></span>
                 <span class="camera_l" style=" top:5%;left:40%"></span>
                 <span class="camera_l" style=" top:10%;left:50%"></span>
                 <span style=" top:30%;left:75%"></span>
                 <span style=" top:5%;left:92%"></span>
                 <span style=" top:40%;left:83%"></span> -->
                </div>
            </div>
            <!--  amiddboxttop end-->
                <div class="amidd_bott">
                  <div class="amiddboxtbott1 fl" >
                    <!-- <h2 class="tith2 pt1">矛盾纠纷环比分析</h2>
                    <div id="amiddboxtbott1" class="amiddboxtbott1content" ></div> -->
					<h2 class="tith2">情感判断分析</h2>
						<div class="lefttoday_tit height"><p class="fl">状态：已刷新</p><p class="fr"  id="d2"></p></div>
					<div id="aleftboxtbott" class="aleftboxtbott_cont" ></div>
                  </div>

                <div class="amiddboxtbott2 fl">
					 <h2 class="tith2 ">不同时间点评论数分析</h2>
              <div class="lefttoday_tit"><p class="fl">状态：已刷新</p><p class="fr" id="d1"></p></div>
              <div id="arightboxbott" class="arightboxbottcont" style=""></div>
                </div>
            </div>
            <!-- amidd_bott end -->
          </div>
        <!-- mrbox_top end -->
        <div class="mrbox_top_right">
          <div class="arightboxtop"><h2 class="tith2">弹幕列表</h2>
            <div class="lefttoday_tit" >
                 <p class="fl">状态：已刷新</p><p class="fr"  id="listDateId"></p></div>
                  <div class="left2_table"  id="listId">
                     <ul>
                         <!--  <li>
                          <p class="fl"><b>康定市公安局</b><br>
                            村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                          </p>
                          <p class="fr pt17">2018-06-22</p>
                          </li>
                          <li class="bg">
                          <p class="fl"><b>康定市公安局</b><br>
                            村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
                          </p>
                          <p class="fr pt17">2018-06-22</p>
                          </li> -->

                     </ul>
                  </div>

        <!--     </div> -->

          </div>
           
        </div>
        <!-- mrbox_top_right end -->
      </div>

    </div>
</div> 
 
        <!--词云-->
        <script type="text/javascript">
          function find(){
                var roomid = $("#roomid").val();
                $.ajax({
                  type: 'GET',
                  data:{"roomid":roomid},
                  url: "http://139.186.65.249:5000/find",
                  dataType: 'json',
                  success: function(data){
                     if (data['picpath'].length>5){
                        //var findId=document.getElementById("findId");
                        ///findId.style.background="url(../"+data['picpath']+") ";
                        $(".amiddboxttop_map").css("background-image","url(../static/roomidimg/"+data['picpath']+")");
                     }
                     


                      //var findId=document.getElementById("findId");
                      //   findId.style.cssText = "backgroundImage: url(../"+data['picpath']+");background-repeat: no-repeat;";
                        
                         //findId.style.backgroundSize= "100% 100%;";
                         //findId.style.backgroundRepeat="no-repeat;";
                         //findId.style.backgroundPosition="top center;";
                         ////background-size: 100% 100%;  background-position: top center;position: relative;width: 90%;    height: 86%;margin: 1.4% 5% 0;
                      
                  }
                });
            }
            setInterval("find()","3000");//1000表示1秒
        </script>

        <!--爬取弹幕-->
        <script type="text/javascript">
          function an6(){
                var roomid = $("#roomid").val();
                $.ajax({
                  type: 'GET',
                  data:{"roomid":roomid},
                  url: "http://139.186.65.249:5000/analyze6",
                  dataType: 'json',
                  success: function(data){
                   
                  }
                });
            }
            setInterval("an6()","2000");//1000表示1秒
        </script>

        <!--数字信息-->
        <script type="text/javascript">
          function an5(){
                var roomid = $("#roomid").val();
                $.ajax({
                  type: 'GET',
                  data:{"roomid":roomid},
                  url: "http://139.186.65.249:5000/analyze5",
                  dataType: 'json',
                  success: function(data){
                 
                    document.getElementById("d51").innerHTML=''+data['d51'];
                    document.getElementById("d52").innerHTML=''+data['d52'];
                    document.getElementById("d53").innerHTML=''+data['d53'];
                    document.getElementById("d54").innerHTML=''+data['d54'];
                    document.getElementById("uid").innerHTML='UP主数据(uid:'+data['uid']+")";
                  }
                });
            }
            setInterval("an5()","7000");//1000表示1秒
        </script>

        <!--弹幕列表-->
        <script type="text/javascript">
                function listIdF(){
                     var roomid = $("#roomid").val();
                     var listId = document.getElementById("listId");
                    $.ajax({
                      type: 'GET',
                      data:{"roomid":roomid},
                      url: "http://139.186.65.249:5000/alldata",
                      dataType: 'json',
                      success: function(data){
                        document.getElementById("listDateId").innerHTML='时间段：'+data['d1'];
                        var text ='';
                        
                        for(var i=0;i<data['d2'].length;i++){
                              tem_list = data['d2'][i].split("*");
                              text=text+'<li class="bg">'
                              +'<p class="fl"><b>'+tem_list[1]+'</b><br>'+tem_list[2]+'<br>'
                              +'</p>'
                              +'<p class="fr pt17">'+tem_list[0]+'</p>'
                              +'</li>';
                        }
                        listId.innerHTML=text;
                       
                      } 
                    });
                }
                setInterval("listIdF()","2000");//1000表示1秒
        </script>
 
        <!--关键字抽取-->
        <script type="text/javascript">
         function an4(){
               var roomid = $("#roomid").val();
               var listId = document.getElementById("listId");
              $.ajax({
                type: 'GET',
                data:{"roomid":roomid},
                url: "http://139.186.65.249:5000/analyze4",
                dataType: 'json',
                success: function(data){
                  
                  document.getElementById("d4").innerHTML='时间：'+data['d1'];
                var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
                option = {
                  color:['#76c4bf','#e5ffc7','#508097','#4d72d9'],
                    backgroundColor: 'rgba(1,202,217,.2)',
                    grid: {
        											left:10,
        											right:40,
        											top:20,
        											bottom:0,
                              containLabel: true
        										},
                              // legend: {
                              //     x : 'center',
                              //     y : '70%',
                              //     textStyle:{
                              //       fontSize: 10,
                              //       color:'rgba(255,255,255,.7)'
                              //     },
                              //     data:['康定市','丹巴县','甘孜县','理塘县']
                              // },
                              calculable : true,
                              series : [

                                  {
                                      name:'面积模式',
                                      type:'pie',
                                      radius : [5, 60],
                                      center : ['50%', '55%'],
                                      roseType : 'area',
                                      data:data['d2']
                                      // [
                                      //     {value:10, name:'康定市'},
                                      //     {value:5, name:'丹巴县'},
                                      //     {value:15, name:'甘孜县'},
                                      //     {value:25, name:'理塘县'}
                                      // ]
                                  }
                              ]
                          };
                myChart.setOption(option);
                 } 
                });
            }
            setInterval("an4()","7000");//1000表示1秒
        </script>
        
        <!--情感判断分析-->
        <script type="text/javascript">
          function an2(){
            var roomid = $("#roomid").val();
            $.ajax({
              type: 'GET',
              data:{"roomid":roomid},
              url: "http://139.186.65.249:5000/analyze2",
              dataType: 'json',
              success: function(data){
               
                document.getElementById("d2").innerHTML='时间：'+data['d1'];
                var myChart = echarts.init(document.getElementById('aleftboxtbott'));
                option = {
                  color:['#7ecef4'],
                    backgroundColor: 'rgba(1,202,217,.2)',
                    grid: {
        											left:20,
        											right:20,
        											top:13,
        											bottom:6,
                              containLabel: true
        										},

                          xAxis: {
                              type: 'value',
                              axisLine:{
                               lineStyle:{
                                 color:'rgba(255,255,255,.2)'
                               }
                             },
                             splitLine:{
                               lineStyle:{
                                 color:'rgba(255,255,255,0)'
                               }
                             },
                             axisLabel:{
                                 color:"rgba(255,255,255,0)"
                             },
                              boundaryGap: [0, 0.01]
                          },
                          yAxis: {
                              type: 'category',
                              axisLine:{
                               lineStyle:{
                                 color:'rgba(255,255,255,.5)'
                               }
                             },
                             splitLine:{
                               lineStyle:{
                                 color:'rgba(255,255,255,.1)'
                               }
                             },
                             axisLabel:{
                                 color:"rgba(255,255,255,.5)"
                             },
                              data: ['正面情绪','负面情绪']
                          },
                          series: [
                              {
                                  name: '2011年',
                                  type: 'bar',
                                  barWidth :30,
                                  itemStyle: {
                                      normal: {
                                          color: new echarts.graphic.LinearGradient(
                                              1, 0, 0, 1,
                                              [
                                                  {offset: 0, color: 'rgba(230,253,139,.7)'},
                                                  {offset: 1, color: 'rgba(41,220,205,.7)'}
                                              ]
                                          )
                                      }
                                  },
                                  data: data['d2']
                              }
                          ]
                      };
                myChart.setOption(option);
              } 
              });
            }
            setInterval("an2()","7000");//1000表示1秒
        </script>

        <!--高频词统计分析-->
        <script type="text/javascript">
          function an3(){
              var roomid = $("#roomid").val();
              $.ajax({
                type: 'GET',
                data:{"roomid":roomid},
                url: "http://139.186.65.249:5000/analyze3",
                dataType: 'json',
                success: function(data){
                  var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));
                  option = {
                    color:['#7ecef4'],
                      backgroundColor: 'rgba(1,202,217,.2)',
                      grid: {
          											left:40,
          											right:20,
          											top:30,
          											bottom:0,
                                containLabel: true
          										},

                            xAxis: {
                                type: 'value',
                                axisLine:{
                                 lineStyle:{
                                   color:'rgba(255,255,255,0)'
                                 }
                               },
                               splitLine:{
                                 lineStyle:{
                                   color:'rgba(255,255,255,0)'
                                 }
                               },
                               axisLabel:{
                                   color:"rgba(255,255,255,0)"
                               },
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                axisLine:{
                                 lineStyle:{
                                   color:'rgba(255,255,255,.5)'
                                 }
                               },
                               splitLine:{
                                 lineStyle:{
                                   color:'rgba(255,255,255,.1)'
                                 }
                               },
                               axisLabel:{
                                   color:"rgba(255,255,255,.5)"
                               },
                                data: data[0]
                            },
                            series: [
                                {
                                    name: '2011年',
                                    type: 'bar',
                                    barWidth :20,
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                1, 0, 0, 1,
                                                [
                                                    {offset: 0, color: 'rgba(230,253,139,.7)'},
                                                    {offset: 1, color: 'rgba(41,220,205,.7)'}
                                                ]
                                            )
                                        }
                                    },
                                    data: data[1]
                                }
                            ]
                        };
                  myChart.setOption(option);
                   } 
                  });
               }
               setInterval("an3()","6000");//1000表示1秒
        </script>

        <!--不同时间点评论数分析-->
        <script type="text/javascript">
              function an1(){
                var roomid = $("#roomid").val();
                $.ajax({
                  type: 'GET',
                  data:{"roomid":roomid},
                  url: "http://139.186.65.249:5000/analyze1",
                  dataType: 'json',
                  success: function(data){
                 
                    document.getElementById("d1").innerHTML='时间：'+data['d1'];
                     var myChart = echarts.init(document.getElementById('arightboxbott'));
                option = {
                  color:['#7de494','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a',  '#00b7ee', '#81dabe','#5fc5ce'],
                    backgroundColor: 'rgba(1,202,217,.2)',

                    grid: {
                        left: '5%',
                        right: '8%',
                        bottom: '7%',
                        top:'8%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine:{
                          lineStyle:{
                            color:'rgba(255,255,255,.2)'
                          }
                        },
                        splitLine:{
                          lineStyle:{
                            color:'rgba(255,255,255,.1)'
                          }
                        },
                        axisLabel:{
                            color:"rgba(255,255,255,.7)"
                        },
                        data: data['name']
                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                          lineStyle:{
                            color:'rgba(255,255,255,.2)'
                          }
                        },
                        splitLine:{
                          lineStyle:{
                            color:'rgba(255,255,255,.1)'
                          }
                        },
                        axisLabel:{
                            color:"rgba(255,255,255,.7)"
                        },
                    },
                    series: [
                        {
                            name:'2014年',
                            type:'line',
                            stack: '总量',
                              areaStyle: {normal: {}},
                            data:data['value']
                        }

                    ]
                    };
                myChart.setOption(option);
                   
                  } 
                });
             }
             setInterval("an1()","6000");//1000表示1秒
        </script>


</body>
</html>
